<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="vue.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button v-for="tab in tabs" @click="page=tab">{{tab.toUpperCase()}}</button>
    <keep-alive>
      <component :is="switchTab"></component>
    </keep-alive>
  </div>


  <script>

    Vue.component('tab-home', {
      template:
        `
      <div>
        <input type="text" value="home"></input>
      </div>
    `
    })
    Vue.component('tab-more', {
      template:
        `
      <div>
        <input type="text" value="more"></input>
      </div>
    `
    })
    Vue.component('tab-user', {
      template:
        `
      <div>
        <input type="text" value="user"></input>
      </div>
    `
    })

    var vm = new Vue({
      el: '#app',
      data: {
        tabs: ['home', 'more', 'user'],
        page: 'home'
      },
      computed: {
        switchTab() {
          return 'tab-' + this.page
        }
      }
    })
  </script>

</body>

</html>